<template>
  <div class='shop-info'>
    <div class="head">
      <img :src="defaultImg" alt="">
      <p class="shop-name color-blue mt10">旗舰店 
        <span class="iconfont icon-huangguan color-yellow"></span>
        <span class="icon-zuanshi iconfont color-yellow"></span>
      </p>
    </div>
    <div class="main">
      <el-popover
        placement="top-start"
        trigger="click">
        <img :src="defaultImg" class="code" alt="">
        <p slot="reference" class="hover"><span class="iconfont icon-ico mr5 color-999"></span><span class="color-666"> 使用手逛本店</span></p>
      </el-popover>
      <p class="white-space"><span class="iconfont icon-zu mr5 color-blue"></span><span class="color-999"> 地址：湖北 武汉  现代世贸中心</span></p>
      <ul>
        <li v-for="(item, index) in register" :key="index">
          <span :class="'iconfont '+item.class"></span>
          <p>{{item.label}}</p>
        </li>
      </ul>
      <el-button type="text" round class="btn hover" @click="gotoPurchase">实单求购</el-button>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      defaultImg:require('@/assets/imgs/shops/default.png'),
      info:{},
      register:[
        {label:"企业认证",class:"icon-qiye color-green"},
        {label:"保证金",class:"icon-baozhengjin color-red"},
        {label:"仓储加工",class:"icon-ercijiagong color-yellow"}
      ]
    };
  },
  methods: {
    gotoPurchase(){
      this.$router.push({path:"/purchase",query:{shopId:1}})
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.shop-info {
  border: 1px solid #f2f2f2;

  .head{
    padding: 15px 0;
    margin: 0 15px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;

    img{
      width: 60px;
      height: 60px;
      margin: 0 auto;
    }
    .iconfont{
      margin-right: 2px;
      font-size: 13px;
    }
  }
  .main{
    padding: 15px;
    font-size: 13px;

    >p{
      margin: 15px 0;
    }

    ul{
      margin-top: 22px;
      display: flex;
      justify-content: space-between;

      li{
        text-align: center;

        .iconfont{
          font-size: 24px;
        }
        p{
          font-size: 13px;
          color: #999;
          margin: 10px 0
        }
      }
    }
    .btn{
      padding: 0 5px;
      line-height: 30px;
      width: 165px;
      color: #FF6600;
      border-color: #ff9900;
      margin: 25px;
      margin-bottom: 10px;
    }
  }
}
</style>